<template>
  <div>
    <router-view></router-view>

    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 头部 -->
      <el-row class="card-head-row">
        <el-col :span="6">
          <div class="grid-content bg-purple-dark"></div>
          <el-input v-model="search.nickname" placeholder="请输入查找的姓名" size="small">
            <el-button slot="append" icon="el-icon-search" @click="getListData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" @click="add" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="list.data" stripe border size="small">
        <el-table-column
          prop="id"
          label="ID"
        >
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="statuScope">
            <el-switch :value="statuScope.row.status==0?true:false" active-color="#13ce66"
                       inactive-color="#ff4949" @change="updateStatus(statuScope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user_type_name"
          label="角色"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="create_time"
          label="注册时间"
        >
        </el-table-column>
        <el-table-column
          prop="register_ip"
          label="注册IP"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="deleUser">
            <el-tooltip content="修改用户" placement="top-start">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="edit(deleUser.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="删除用户" placement="top-start">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="delUser(deleUser.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background
                     layout="total,prev, pager, next"
                     :page-size="list.pageSize"
                     :total="list.total"
                     @current-change="pageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {status, student, user} from "../../request";

export default {
  name: "Student",
  data() {
    return {search: {}, list: {total: 0, pageSize: 15, data: []}};
  },
  created() {
    this.getListData();
  },
  methods: {
    async getListData() {
      const data = await student.list(this.search);
      if (data.code == status.SUCCESS) {
        this.list.data = data.data.data;
        this.list.total = data.data.total;
      }
    },
    pageChange(page) {
      this.search.page = page;
      this.getListData();
    },
    /**
     * 添加
     */
    add() {
      this.$router.push({name: 'StudentAdd'});
    },
    /**
     * 编辑
     */
    edit(row) {
      this.$router.push({name: 'StudentEdit', params: {'id': row.id}});
    },
    /**
     * 更新用户状态
     * @param row
     */
    async updateStatus(row) {
      row.status = row.status ? 0 : 1;
      const data = await user.updateStatus({id: row.id, status: row.status});
      if (data.staus == status.SUCCESS) {
        this.$message.success(data.msg);
      }
    },
    /**
     * 删除用户
     * @param row
     */
    delUser(row) {
      this.$confirm('确定要删除此用户吗？', '提示', {type: 'warning'}).then(async () => {
        const data = await user.del({id: row.id});
        if (data.code == status.SUCCESS) {
          this.$message({type: 'success', message: data.msg || '删除成功'});

          this.getListData();
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
